<!DOCTYPE html>
<html>

<head>
	<link rel="icon" href="images/拉黑小怪兽.png">
	<title>仓库</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta name="keywords" content="" />
	<link rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/css/justifiedGallery.min.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.7.0/js/jquery.justifiedGallery.min.js"></script>
</head>
<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
<link href="css/button.css" rel='stylesheet' type='text/css' />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
<link href="css/daohang.css" rel='stylesheet' type='text/css' />
<style>
	.loginButton {

		margin-top: 5px;
		/* 按钮顶部与输入框的距离 */
		width: 300px;
		height: 40px;
		color: white;
		/* 按钮字体颜色 */
		border: 0;
		/* 删除按钮边框 */
		border-radius: 20px;
		/* 按钮圆角边 */
		background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
		/* 按钮颜色 */
		cursor: pointer;
	}

	.container {
		background-color: #fff;
		/* 白色背景 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 100vh;
	}

	.elegant-menu {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		/* 让列表项水平排列 */
		background-color: white;
		/* 背景色 */
		border: 1px solid #ccc;
		/* 边框 */
		border-radius: 10px;
		/* 圆角边框 */
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		/* 阴影效果 */
	}

	.elegant-menu li {
		padding: 20px;
		text-align: center;
		border-right: 1px solid #ccc;
		/* 垂直分隔线 */
	}

	.elegant-menu li:last-child {
		border-right: none;
	}

	.elegant-menu li a {
		text-decoration: none;
		color: #333;
		/* 文本颜色 */
		font-weight: bold;
		font-size: 16px;
		transition: color 0.3s;
	}

	.elegant-menu li a:hover {
		color: #00bcd4;
		/* 鼠标悬停时的文本颜色 */
	}

	.px_tabs {
		flex: 1;
		text-align: center;
		white-space: nowrap;
		background-color: #fff;
		list-style-type: none;
		overflow-x: auto;
	}

	.sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 9999999;
		min-width: 1000px;
	}

	.cd-search {
		width: 60%;
		top: 100%;
		left: 38%;
		border-radius: 25px;
	}

	.cd-search input {
		border-radius: 25px;
	}

	.image-preview {
		display: flex;
		flex-wrap: wrap;
	}

	.image-preview img {
		max-width: 200px;
		margin: 10px;
	}

	/* 样式化自定义的文件上传按钮 */
	.custom-file-upload {
		border: 1px solid white;
		display: inline-block;
		padding: 6px 12px;
		cursor: pointer;
		text-align: center;
		background-color: white;
		color: #333;
		border-radius: 4px;
	}

	/* 隐藏默认的文件上传输入框 */
	#imageInput {
		display: none;
	}

	/* 美化显示上传的图片 */
	#imageContainer {
		display: flex;
		flex-wrap: wrap;
	}

	.uploadedImage {
		max-width: 200px;
		max-height: 200px;
		margin: 10px;
	}


	/* 样式化框 */
	.custom-container {
		display: flex;

		align-items: center;
		justify-content: center;
		text-align: center;
	}

	._bgsetting {
		opacity: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, .2);
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transition: opacity .2s;
		-moz-transition: opacity .2s;
		transition: opacity .2s;
	}

	._bgsetting .button {
		width: 140px;
		height: 42px;
		line-height: 42px;
		font-size: 18px;
		background-color: rgba(0, 0, 0, .4);
		color: #fff;
		position: absolute;
		top: 16px;
		right: 13px;
	}

	.tertiary {
		background-color: #f7f8fa;
		border-color: rgba(185, 193, 199, .5);
		text-shadow: none;
		color: #71767a;
	}

	.custom-box {
		width: 100px;
		height: 100px;
		border: 2px solid grey;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		cursor: pointer;
		margin-bottom: 10px;
	}

	/* 当鼠标悬停时改变样式 */
	.custom-box:hover {
		background-color: #f0f0f0;
	}

	.add {
		position: relative;
		top: -5px;
		left: 20px;
	}

	/* 样式化文本 */
	.text-inside-box {
		position: relative;
		top: 18px;
		right: 10px;
	}

	#tuichu:hover {
		cursor: pointer;
	}
</style>
</head>

<body>

	<div class="top-bar_sub_w3layouts_agile sticky" style="height: 80px;height: 80px; border-bottom: 2px solid grey;">
		<ul class="_ul_ daohangpos">
			<li class=" _need_popover" style=" position: absolute; left: 200px; top: 25px;">
				<a class="daohang_font" id="daohang-faxian" href="shouye.html">首页 </a>
				<a href="remen.html" class="daohang_font">热门</a>
				<a href="xinzuo.html" class="daohang_font">新作</a>
				<a href="guanzhu.html" class="daohang_font">关注</a>
				<a href="cangku.html" class="daohang_font">仓库</a>
			</li>
		</ul>
		<div class="search">
			<div class="right" style="right: 90px;">
				<h1><a style="position: absolute;left: 30px;top:20px;color:black;" href="shouye.html">Photo
						Go</a></h1>
				<h5>
					<a style="width: 150px; position: absolute;right:380px;top:25px;padding: 2px 20px;text-align: center;"
						class="sign signup " href="userinfo.html">修改个人信息</a>
					<a style="position: absolute;right:250px;top:25px;padding: 2px 20px;text-align: center;"
						class="sign signup " href="shangchuan.html">上传</a>
					<a id="tuichu"
						style="width: 150px; position: absolute;right:80px;top:25px;padding: 2px 20px;text-align: center;"
						class="sign signup ">退出登录</a>
				</h5>
			</div>
			<div class="cd-main-header">
				<ul class="cd-header-buttons">
					<li><a class="cd-search-trigger" href="#cd-search"
							style="position: absolute;right: 10px;top: 35px;"> <span></span></a></li>
				</ul>
			</div>
			<div id="cd-search" class="cd-search">

				<input id="sousuo" name="Search" type="search" placeholder="搜索作品" onkeydown="handleKeyDown(event)">

			</div>
		</div>
		<div class="clearfix"> </div>
	</div>
	</div>
	<div class="container" style="position: relative;min-width: 1000px;height: 500px;">
		<img id="beijing" src="./images/1.jpeg"
			style="height: 300px;width: 1200px;position: relative;bottom: 100px;left: 140px;">
		<label for="fileInput" class="custom-file-upload"
			style=" width: 150px;height: 100px; position: relative;left: 150px;bottom: 80px;">

			<a id="setting" style="width: 150px; position: absolute;left: 80px ; padding: 2px 20px;text-align: center;"
				class="sign signup ">设置个人主页</a>
<p id="yes"></p>

		</label>
		<input type="file" id="imageInput" accept="image/png,image/jpg" multiple style="display: none;">
		<button onclick="selectImages()" id="fileInput" style="display: none;">
		</button>
		<img id="touxiang" src="./images/拉黑小怪兽.png"
			style="width: 100px;height: 100px;position: absolute;top:240px;left:500px;">
		<p id="guanzhu" style="font-size: 15px; position: absolute;top:350px;left:450px">关注</p>
		<p id="fensi" style="font-size: 15px;position: absolute;top:350px;left:550px">粉丝</p>
		<ul class="elegant-menu" style="position: absolute;top:380px;left:445px">
			<li><a href="cangku.html" style="color: #00bcd4;">公开作品</a></li>
			<li><a href="private.html">私有作品</a></li>
		</ul>
		<a id="upload" style="position: relative;top:10px;left:100px"><input class="loginButton" type="button"
				value="上传个人主页" style="width: 200px;" /></a>
	</div>
	<div id="zhanshi" class="justified-gallery"
		style="position: relative;min-width: 1000px;height: 1000px;max-width: 1500px;">

	</div>
	<script>
		var tuichu = document.getElementById('tuichu');
		const token = localStorage.getItem("token");
		tuichu.addEventListener("mousedown", function (event) {
			$.ajax({
				method: 'post',
				url: 'http://localhost:7777/logout',
				contentType: 'application/json;charset=UTF-8',
				headers: {
					"token": token
				},
				success: function (data, status, xhr) {
					var responseText = xhr.responseText;
					console.log(responseText);
					if (responseText.includes("200")) {
						tuichu.href = "shouyeno.html";
						tuichu.click();
					}
				},
				error: function (xhr, status, error) {
					var responseText = xhr.responseText;
					console.log("error:", responseText);
				}
			})
		})
		function handleKeyDown(event) {
			if (event.keyCode === 13) {
				var sousuo = document.getElementById('sousuo');
				var d1 = {
					"description": "",
				}
				d1["description"] = sousuo.value;
				console.log("type", typeof (sousuo.value), "text:", sousuo.value);
				$.ajax({
					method: 'get',
					url: 'http://localhost:7777/content/Category/list' + "?description=" + sousuo.value,
					contentType: 'application/json;charset=UTF-8',
					success: function (data, status, xhr) {
						var responseText = xhr.responseText;
						console.log(responseText);
						if (responseText.includes("200")) {
							var result = JSON.parse(responseText);
							var data = result["data"];
							console.log("data:", data);
							var len = data.length;
							var where = "sousuo.html" + "?";
							for (var i = 0; i < len; i++)
								where = where + "id=" + data[i]["id"];
							console.log(where);
							window.location.href = where;
						}
					},
					error: function (xhr, status, error) {
						var responseText = xhr.responseText;
						console.log("error:", responseText);
					}
				})
				event.preventDefault(); // 阻止默认的回车提交行为（如果有）
			}
		}
	</script>
	<script>
		function selectImages() {
			const input = document.getElementById('imageInput');
			input.click(); // 模拟点击文件输入框
		}
		document.getElementById('imageInput').addEventListener('change', handleImageUpload);
		function handleImageUpload(event) {
			const files = event.target.files;
			const imagePreview = document.getElementById('beijing');
			if (files && imagePreview) {
				for (const file of files) {
					const reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function (e) {
						imagePreview.src = e.target.result;
					};
				}
			}
		}
	</script>
	<script>
		var which = 0;
		var guanzhu = document.getElementById("guanzhu");
		var fensi = document.getElementById("fensi");
		const userid = localStorage.getItem("userid");
		var upload = document.getElementById("upload");
		upload.addEventListener("mousedown", function (event) {
			var count = 0;
			var xxx = "";
			for (var i = 0; i < 1; i++) {
				const input = document.getElementById('imageInput');
				const file = input.files[i];
				var xmlhttp = new XMLHttpRequest()
				var formData = new FormData();
				formData.append('img', file);
				console.log(formData);
				xmlhttp.open('post', 'http://localhost:7777/upload');
				xmlhttp.setRequestHeader('token', token);
				xmlhttp.onreadystatechange = function (res) {
					if (xmlhttp.status === 200 && xmlhttp.readyState == 4) {
						console.log(xmlhttp.response)
						var responseText = xmlhttp.response;
						var result = JSON.parse(responseText);
						xxx = result["data"];
						count++;
						fff();
					}
				}
				xmlhttp.send(formData);
			}

			function fff() {
				if (count == 1) {
					var d = {
						"background": "",
					}
					d["background"] = xxx;
					$.ajax({
						method: 'put',
						url: 'http://localhost:7777/user/userInfo',
						contentType: 'application/json;charset=UTF-8',
						headers: {
							"token": token,
						},
						data: JSON.stringify(d),
						success: function (data, status, xhr) {
							var responseText = xhr.responseText;
							console.log(responseText);
							var yes = document.getElementById("yes");
							yes.innerHTML="成功上传"
						},
						error: function (xhr, status, error) {
							var responseText = xhr.responseText;
							console.log(responseText);
						}
					})
				}
			}
		})
		$.ajax({
			method: 'get',
			url: 'http://localhost:7777/user/' + userid,
			contentType: 'application/json;charset=UTF-8',
			success: function (data, status, xhr) {
				var responseText = xhr.responseText;
				console.log(responseText);
				if (responseText.includes("200")) {
					var result = JSON.parse(responseText);
					var data = result["data"];
					var src = data["avatar"];
					var touxiang = document.getElementById("touxiang");
					touxiang.src = src;
					var beijing = document.getElementById("beijing");
					beijing.src = data["background"];
					console.log(data);
				}
			},
			error: function (xhr, status, error) {
				var responseText = xhr.responseText;
				console.log("error:", responseText);
			}
		})
		$.ajax({
			method: 'get',
			url: 'http://localhost:7777/fans/liked/' + userid,
			contentType: 'application/json;charset=UTF-8',
			success: function (data, status, xhr) {
				var responseText = xhr.responseText;
				console.log(responseText);
				if (responseText.includes("200")) {
					var now = 0;
					for (var i = 0; i < responseText.length; i++) {
						if (responseText[i] == "{")
							now++;
					}
					now--;
					fensi.innerHTML = "粉丝" + now;
				}
			},
			error: function (xhr, status, error) {
				var responseText = xhr.responseText;
				console.log("error:", responseText);
			}
		})
		$.ajax({
			method: 'get',
			url: 'http://localhost:7777/fans/like/' + userid,
			contentType: 'application/json;charset=UTF-8',
			success: function (data, status, xhr) {
				var responseText = xhr.responseText;
				console.log(responseText);
				if (responseText.includes("200")) {
					var now = 0;
					for (var i = 0; i < responseText.length; i++) {
						if (responseText[i] == "{")
							now++;
					}
					now--;
					guanzhu.innerHTML = "关注" + now;
				}
			},
			error: function (xhr, status, error) {
				var responseText = xhr.responseText;
				console.log("error:", responseText);
			}
		})

		$.ajax({
			method: 'get',
			url: 'http://localhost:7777/article/user/' + userid,
			contentType: 'application/json;charset=UTF-8',
			success: function (data, status, xhr) {
				var responseText = xhr.responseText;
				console.log(responseText);
				if (responseText.includes("200")) {
					var result = JSON.parse(responseText);
					var data = result["data"];
					console.log("data:", data);
					var len = data.length;
					console.log("data.length", len);
					$(document).ready(function () {
						// 假设后端提供的图片URL列表是一个JSON数组
						var imageUrls = [];
						var idlist = []
						for (var i = 0; i < len; i++) {
							if (data[i]["status"] == "1") {
								imageUrls[i] = data[i]["photo"];
								idlist[i] = data[i]["id"];
							}
						}
						// 将图片URL动态添加到Justified-Gallery中
						var gallery = $("#zhanshi");
						var j = 0;
						$.each(imageUrls, function (index, imageUrl) {
							var imd = idlist[j];
							gallery.append('<a href="image.html?id=' + imd + '" data-lightbox="my-gallery"><img src="' + imageUrl + '" alt="Image ' + (index + 1) + '"></a>');
							j++;
						});
						// 初始化Justified-Gallery
						gallery.justifiedGallery({
							rowHeight: 250,
							margins: 5,
							maxRowHeight: 200,
							maxRowHeightPremium: 200,
							lastRow: 'justify',
							captions: false,
							randomize: false
						});
					});
				}
			},
			error: function (xhr, status, error) {
				var responseText = xhr.responseText;
				console.log("error:", responseText);
			}
		}) 
	</script>
	<script src="js/main.js"></script>
	<script src="js/jquery.chocolat.js"></script>
	<script type="text/javascript">
		$(function () {
			$('.gallery-grid1 a').Chocolat();
		});
	</script>
	<link rel="stylesheet" type="text/css" href="css/easy-responsive-tabs.css " />
	<!-- start-smoth-scrolling -->
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 900);
			});
		});
	</script>
	<!-- start-smoth-scrolling -->

	<script type="text/javascript">
		$(document).ready(function () {
			/*
									var defaults = {
											containerID: 'toTop', // fading element id
										containerHoverID: 'toTopHover', // fading element hover id
										scrollSpeed: 1200,
										easingType: 'linear' 
										};
									*/

			$().UItoTop({
				easingType: 'easeOutQuart'
			});

		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>


</body>

</html>